import {Modal, Tag} from 'antd';
import React, {useRef} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {isSuccess} from "@/utils/utils";
import {DesignerManager} from "@/services/api-functions";
import ProTable, {ActionType, ProColumns} from "@ant-design/pro-table";
import {ExclamationCircleOutlined} from "@ant-design/icons";
import {caseRecommend} from "@/pages/custom/service/list";
import {SYS_ENUMS} from "@/utils/constants";


const RecommendServiceList: React.FC<any> = ({}) => {
  const actionRef = useRef<ActionType>();
  const columns: ProColumns[] = [
    {
      title: '设计师',
      dataIndex: 'designerName',
      ellipsis: true,
      hideInTable: true,
    },
    {
      title: '服务名称',
      dataIndex: 'serverName',
      ellipsis: true,
      fixed: 'left',
      width: 350,
    },
    {
      title: '设计师',
      dataIndex: ['replyUserDto', 'nickName'],
      ellipsis: true,
      hideInSearch: true,
      width: 120,
    },
    {
      title: '设计师等级',
      dataIndex: 'customizeLevel',
      ellipsis: true,
      hideInSearch: true,
      width: 150,
      valueEnum: SYS_ENUMS.LEVEL,
    },
    {
      title: '服务评分',
      dataIndex: 'serverScore',
      width: 100,
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: '推荐时间',
      dataIndex: 'recommendDate',
      valueType: 'dateTime',
      width: 170,
      hideInSearch: true,
      hideInForm: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      hideInSearch: true,
      fixed: 'right',
      hideInForm: true,
      render: (_, record) => [
        // <a key="edit" href={`/article/detail/${record?.id}`}>详情</a>,
        (
          !record.recommend
            ? <span style={{color: 'gray'}}>取消推荐</span>
            : <a key="edit" onClick={() => Modal.confirm({
              title: '提示',
              icon: <ExclamationCircleOutlined/>,
              content: <span>确定要取消推荐 <Tag color='#108ee9'>{record.serverName}</Tag> 吗？</span>,
              okText: '取消推荐',
              cancelText: '取消',
              onOk: async () => {
                if (await caseRecommend(record, false)) {
                  actionRef.current?.reload()
                }
              },
            })}>取消推荐</a>
        ),
      ],
    },
  ];

  return (
    <PageContainer>
      <ProTable<any, any>
        actionRef={actionRef}
        rowKey="key"
        search={{
          labelWidth: 120,
        }}
        request={async (params) => {

          const {data: {data, total}, code}: any = await DesignerManager.serverList({...params, recommend: true});

          return {data: data || [], success: isSuccess(code), total: isSuccess(code) ? total : 0};
        }}
        columns={columns}
        scroll={{ x: 1300 }}
      />
    </PageContainer>
  );
};

export default RecommendServiceList;
